<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片放大镜效果</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="wrap">
		<div id="magnify">
	        <div class="simg">
		        <img src="images/big1.jpg" width="400" height="400"  alt="美女" >
				<div class="mov"></div>
	        </div>
	        <div class="bigimg">
	  	        <img src="images/big1.jpg" width="800" height="800"  alt="大美女">
	        </div>
	    </div>
	    <div class="series" >
            <ul class="cont">
                <li class="hover">
                    <img src="images/1.jpg" width="50" height="50"  alt="" bigimages="images/big1.jpg" />
                </li>
                <li>
                    <img src="images/2.jpg" width="50" height="50"  alt="" bigimages="images/big2.jpg"/>
                </li>
                <li>
                    <img src="images/3.jpg" width="50" height="50"  alt="" bigimages="images/big3.jpg"/>
                </li>
                <li>
                    <img src="images/4.jpg" width="50" height="50"  alt=""  bigimages="images/big4.jpg"/>
                </li>
                <li>
                    <img src="images/5.jpg" width="50" height="50"  alt="" bigimages="images/big5.jpg"/>
                </li>
                <li>
                    <img src="images/6.jpg" width="50" height="50"  alt="" bigimages="images/big6.jpg"/>
                </li>
            </ul> 
	    </div>
    </div>
    <script src="index.js "></script>
</body>
</html>